<!DOCTYPE html>
<style>
    .button {
        display: inline-block;
        width: 20em;
        height: 2em;
        font: 16px/2em sans-serif;
        overflow: hidden;
        vertical-align: top;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: black;
        background: gray;
    }
</style>
<p>There should be two gray boxes with overflowing text, truncated with "...".</p>
<div class="button">Houses can be built from different kinds of materials. The most common types are brick, wood, and vinyl or synthetic siding. Houses have lawns that need to be tended.</div>
<br><br>
<div class="button">Houses can be built from different kinds of materials. The most common types are brick, wood, and vinyl or synthetic siding. Houses have lawns that need to be tended.</div>
